import React from "react";
import ReactDOM from "react-dom";
import '../css/dice1.scss';

class Dice extends React.Component {
    

    render(){
        let boxArr = [];
        for (let index = 1; index < 10; index++) {
            boxArr.push(index);
        }

        return (<div className="dice-contain">
                <div className="dice-contain01"> 
                    {boxArr.map((item)=>{
                        return (<div className={"dice-box dice-box0"+item}>
                                <span className="dot"></span>
                            </div>)
                    })}
                </div>
                <div className="dice-contain02"> 
                    {boxArr.map((item)=>{
                        if (item<5) {
                            return (<div className={"dice-box dice-box0"+item}>
                                <span className="dot dot1"></span>
                                <span className="dot dot2"></span>
                            </div>)
                        }else{
                            return (<div className={"dice-box dice-box0"+item}>
                                <div className="dot1"><span className="dot"></span></div>
                                <div className="dot2"><span className="dot"></span></div>
                            </div>)
                        }
                       
                    })}
                </div>
                <div className="dice-contain03"> 
                    {
                        <div className={"dice-box dice-box01"}>
                            <div className="dot1"><span className="dot"></span></div>
                            <div className="dot2"><span className="dot"></span></div>
                            <div className="dot3"><span className="dot"></span></div>
                        </div>
                    }
                    {
                        <div className={"dice-box dice-box02"}>
                            <span className="dot"></span>
                            <span className="dot"></span>
                            <span className="dot"></span>
                        </div>
                    }
                </div>
                <div className="dice-contain04"> 
                    {
                        <div className={"dice-box dice-box01"}>
                            <div className="dot123">
                                <span className="dot"></span>
                                <span className="dot"></span>
                                <span className="dot"></span>
                            </div>
                            <div className="dot4"><span className="dot"></span></div>
                        </div>
                    }
                    
                    {
                        <div className={"dice-box dice-box03"}>
                            <div className="dot12">
                                <span className="dot"></span>
                                <span className="dot"></span>
                            </div>
                            <div className="dot34">
                                <span className="dot"></span>
                                <span className="dot"></span>
                            </div>
                           
                        </div>
                    }
                </div>
                <div className="dice-contain05">
                    <div className={"dice-box dice-box03"}>
                        <div className="dot12">
                            <span className="dot"></span>
                            <span className="dot"></span>
                        </div>
                        <div className="dot3">
                            <span className="dot"></span>
                        </div>
                        <div className="dot45">
                            <span className="dot"></span>
                            <span className="dot"></span>
                        </div>
                    </div>
                </div>
                <div className="dice-contain06">
                    <div className={"dice-box dice-box01"}>
                        <div className="dot12">
                            <span className="dot"></span>
                            <span className="dot"></span>
                        </div>
                        <div className="dot34">
                            <span className="dot"></span>
                            <span className="dot"></span>
                        </div>
                        <div className="dot56">
                            <span className="dot"></span>
                            <span className="dot"></span>
                        </div>
                    
                    </div>
                </div>
                
            
               
            </div>
        )
    }
}

export default Dice;
    



